<template>
	<div>
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form label-width="140px" :inline="true" :model="listQuery" size="mini" ref="searchForm">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">
					<el-form-item label="管片：" prop="BlockGroup">
						<el-select clearable v-model="listQuery.BlockGroup" @change='gpChange'>
							<div v-for="(item,index) in gpList" :key="index">

								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="BlockNo">
						<el-input v-model="listQuery.BlockNo"></el-input>
					</el-form-item>
					
						<el-form-item label="管理形式：" prop="ManageWay">
							<el-select clearable v-model="listQuery.ManageWay" placeholder="全部" style="width: 100%">
								<el-option label="正常" value="正常"></el-option>
								<el-option label="新纳入" value="新纳入"></el-option>
								<el-option label="托管房屋" value="托管房屋"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="产别：" prop="OwnWay">
							<el-select clearable v-model="listQuery.OwnWay" placeholder="全部" style="width: 100%">
								<el-option label="公产" value="公产"></el-option>
								<el-option label="代管产" value="代管产"></el-option>
								<el-option label="经营产" value="经营产"></el-option>
								<el-option label="托管产" value="托管产"></el-option>
								<el-option label="教会产" value="教会产"></el-option>
								<el-option label="国有自营产" value="国有自营产"></el-option>
								<el-option label="股份企业产" value="股份企业产"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="地级(住)：" prop="AddressLevelLiving" label-width="140px">
						  <el-select clearable v-model="listQuery.AddressLevelLiving">
						    <el-option label="一级" value="一级" key="1"></el-option>
						    <el-option label="二级" value="二级" key="2"></el-option>
						    <el-option label="三级" value="三级" key="3"></el-option>
						    <el-option label="四级" value="四级" key="4"></el-option>
						    <el-option label="五级" value="五级" key="5"></el-option>
						    <el-option label="*" value="*" key="6"></el-option>
						  </el-select>
						</el-form-item>
						<el-form-item label="地级(非)：" prop="AddressLevelNonLiving" label-width="140px">
						  <el-select clearable v-model="listQuery.AddressLevelNonLiving">
						    <el-option label="甲级" value="甲级" key="1"></el-option>
						    <el-option label="乙级" value="乙级" key="2"></el-option>
						    <el-option label="丙级" value="丙级" key="3"></el-option>
						    <el-option label="丁级" value="丁级" key="4"></el-option>
						    <el-option label="茂级" value="茂级" key="5"></el-option>
						    <el-option label="特级" value="特级" key="6"></el-option>
						    <el-option label="*" value="*" key="7"></el-option>
						  </el-select>
						</el-form-item>
						<el-form-item label="建筑形式：" prop="BuildingForm" label-width="140px">
							<el-select clearable v-model="listQuery.BuildingForm">
								<el-option label="楼房" value="楼房" key="1"></el-option>
								<el-option label="平房" value="平房" key="0"></el-option>
							</el-select>
						</el-form-item>

				</div>
			</el-form>
			<div div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
				<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">往房租金变动情况</div>
			<div style="margin-top: 20px;margin-left: 20px;">附件4</div>
			<div class="tabs">
				<div class="tabsHead">
					<div class="headList" style="width: 60px;">年度</div>
					<div class="headList" style="width: 90px;">变动日期</div>
					<div class="headList" style="width: 300px;">每月租金金额</div>
					<div class="headList" style="width: 120px;">经办人(公章)</div>
				</div>
				<div class="tabsHead2" v-for="(item,index) in 5" :key="index">
					<div class="headList2" style="width: 60px;"></div>
					<div class="headList2" style="width: 90px;">
						<div style="line-height: 40px;">日</div>
						<div style="line-height: 40px;">月</div>
					</div>
					<div class="headList2" style="width: 300px;">
						<div class="money">
							<div>小写：</div>
							<div>元</div>
						</div>
						<div class="money">
							<div>大写：</div>
							<div>元</div>
						</div>
					</div>
					<div class="headList2" style="width: 120px;"></div>
				</div>
			</div>
		</div>

		<button style="margin: 10px auto 0;display: block;" v-print="printObj">打印住房租金变动情况</button>
		<div id="loading" v-show="printLoading"></div>
	</div>
</template>

<script>
	import {
		listContract,
		createContract,
		submitContract,
		faFangContract,
		deleteContractById,
		authContract,
		updateContract,
	} from "@/api/management";
	import {
		getArea,
		getHouseAdmin,
		blockGroupList,
		blockList
	} from '@/api/industry'
	import {
		Message
	} from "element-ui";
	import moment from "moment";

	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				// 管片列表
				gpList: [],
				isSearch: false,
				listQuery:{
					BlockGroup:'',
					BlockNo:'',
					ManageWay:'',
					OwnWay:'',
					AddressLevelLiving:'',
					AddressLevelNonLiving:''
				}
			};
		},

		computed: {},

		mounted() {
			this.blockGroupList()
		},

		methods: {
			// 管片列表
			blockGroupList() {
				let data = {
					pageNum: 1,
					pageSize: 9999999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.gpList = res.data.list
					this.listLoading = false
				})
			},
			//管片
			gpChange(e) {
				this.listQuery.BlockGroup = e
			},
			handleSearch(){
				
			}
		},
	};
</script>
<style scoped>
	.publicpageview {
		width: 600px;
		height: 750px;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
	}

	.tabs {
		width: 560px;
		height: 640px;
		margin: 10px auto 0;
		outline: 1px solid black;
	}

	.tabsHead {
		display: flex;
	}

	.headList {
		outline: 1px solid black;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.tabsHead2 {
		display: flex;
		height: 120px;
	}

	.headList2 {
		outline: 1px solid black;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.money {
		outline: 1px solid black;
		height: 60px;
		line-height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 10px;
	}
</style>